<template>
  <div>
    <!-- 添加或修改学生购买课程对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="课程名称" prop="courseName">
          <SearchCourseName ref="SearchCourseName" @update="updateCourseInfo" />
        </el-form-item>

        <el-form-item label="课时" prop="classTime">
          <el-input v-model="form.classTime" placeholder="请输入课时" />
        </el-form-item>
        <el-form-item label="剩余课时" prop="classSurplusTime">
          <el-input v-model="form.classSurplusTime" placeholder="请输入剩余课时" />
        </el-form-item>
        <el-form-item label="学生姓名" prop="studentName">
          <SearchStudent ref="SearchStudent" @change="updateStudentInfo"/>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            clearable
            size="small"
            v-model="form.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            clearable
            size="small"
            v-model="form.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="定金" prop="deposit">
          <el-input v-model="form.deposit" placeholder="请输入总金额" />
        </el-form-item>
        <el-form-item label="总金额" prop="totalAmount">
          <el-input v-model="form.totalAmount" placeholder="请输入总金额" />
        </el-form-item>
        <el-form-item label="销售人员" prop="courseSalesman">
          <el-input v-model="form.courseSalesman" placeholder="请输入销售人员" />
        </el-form-item>
        <el-form-item label="支付方式" prop="payType">
          <el-select v-model="form.payType" placeholder="请选择支付方式">
            <el-option
              v-for="dict in dict.type.sys_pay_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCourse, getCourse, delCourse, addCourse, updateCourse, exportCourse } from "@/api/school/course";
import {  getCourseByName } from "@/api/school/class";
import SearchCourseName from './searchCourseName.vue'
import SearchStudent from './searchStudent.vue'
export default {
  dicts: ["sys_pay_type"],
  components: {SearchCourseName, SearchStudent},
  data() {
    return {
      classList: [],
      open: false,
      title: "",
      // 表单参数
      form: {
        courseName: '',
        classTime: '',
        studentName: '',
        startTime: '',
        endTime: '',
        totalAmount: '',
        courseSalesman: '',
        payType: '',
        remark: ''

      },
      // 表单校验
      rules: {
        courseName: [
          { required: true, message: "请选择课程名称", trigger: "blur" },
        ],
        classTime: [
          { required: true, message: "请输入课时", trigger: "blur" },
        ],
        // studentId: [
        //   { required: true, message: "请选择学生姓名", trigger: "blur" },
        // ],
        studentName: [
          { required: true, message: "请选择学生姓名", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请选择课程开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择课程结束时间", trigger: "blur" },
        ]
      },
    };
  },
  watch: {
    open: function(newV, oldV) {
      if (newV) {
          this.$nextTick(() => {
            if (this.title.search(/修改/g) > -1 ) {
              //this.$refs.SearchCourseName.init(this.form.classId)
              this.$refs.SearchCourseName.init(this.form.courseName)

               //this.$refs.SearchStudent.init(this.form.studentId)
              this.$refs.SearchStudent.init(this.form.studentName)
            } else {
              this.$refs.SearchCourseName.init()
              this.$refs.SearchStudent.init()
            }
          })
      }
    }
  },
  methods: {
    updateStudentInfo(e) {
      console.log(e, 'e11')
      this.form.studentId = e
      this.form.studentName = e;
    },
    updateCourseInfo(e) {
      console.log(e, 'e11')
      this.form.classId = e;
      this.form.courseName = e;
    },
    updateTeacherInfo(e) {
      this.form.teacherId = e
    },
    remoteMethod(query) {
      getCourseByName({name: query}).then(res => {
        console.log(res)
        this.classList = res.data
      })
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form, 'form')
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateCourse(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit('updatedata')
            });
          } else {
            addCourse(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit('updatedata')
            });
          }
        }
      });
    },

    // 取消按钮
    cancel() {
      this.$refs.SearchCourseName.init()
      this.$refs.SearchStudent.init()
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        courseName: '',
        studentName: '',
        classTime: null,
        classId: null,
        studentId: null,
        startTime: null,
        endTime: null,
        discountAmount: null,
        totalAmount: null,
        payType: null,
        createTime: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>